<template>
	<view>
		<view class="head">
			<image class="img" src="../../static/head.jpg" mode=""></image>
		</view>
		<view class="main">
			<image class="img" src="../../static/main.jpg" mode=""></image>
			<view class="title">
				<text class="txt">富同精英风采</text>
				<swiper class="banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="(item,index) in image">
						<view class="swiper-item">
							<image :src="item.imgUrl" mode=""></image>
						</view>
					</swiper-item>
				</swiper>

				<text class="txt1">富同团队风采</text>
				<swiper class="banner1" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item>
						<view class="swiper-item">
							<image src="../../static/shop/1595833354066324005.jpg" mode=""></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<image src="../../static/shop/1595833443068049276.jpg" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
				<view class="lists">
					<view class="list" v-for="(item,index) in lists" :key='index' @click="router(index)">
						<image :src="'../../static/icon/icon'+(index+1)+'.png'" mode=""></image>
						<view class="text">{{item}}</view>
					</view>
				</view>
				<!-- 合伙人 logo -->
				<view class="logo" @click="btn">
					<image src="../../static/hezuo.png" mode=""></image>
				</view>
				<!-- 合伙人 logo  end -->
				<!-- 最新消息 -->
				<view class="txt">富同精英风采</view>
				<view class="row">
					<image class="image" src="../../static/shop/1595833524878383141.jpg" mode=""></image>
					<view class="list">
						<view class="li">
							<view class="text">
								· 杭州、无锡出台楼市调控政策 热点城市...
							</view>
							<view class="icon">
								<image class="img" src="../../static/icon/iconRight.png" mode=""></image>
							</view>
						</view>
						<view class="li">
							<view class="text">
								· 杭州、无锡出台楼市调控政策 热点城市...
							</view>
							<view class="icon">
								<image class="img" src="../../static/icon/iconRight.png" mode=""></image>
							</view>
						</view>
						<view class="li">
							<view class="text">
								· 杭州、无锡出台楼市调控政策 热点城市...
							</view>
							<view class="icon">
								<image class="img" src="../../static/icon/iconRight.png" mode=""></image>
							</view>
						</view>
						<view class="li">
							<view class="text">
								· 杭州、无锡出台楼市调控政策 热点城市...
							</view>
							<view class="icon">
								<image class="img" src="../../static/icon/iconRight.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="main1">
			<image class="img" src="../../static/main1.jpg" mode=""></image>
		</view>
		<view class="bottom">
			<image class="img" src="../../static/button.jpg" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lists: [
					'富同商城', '不动产', '家政服务', '文旅', '综合服务', '公司简介',
				],
				image:[
					{}
				]
			};
		},
		created(){
			this.$u.get('/indexImgs').then(res =>{
				console.log(res)
				console.log(this.image = res.data)
				console.log(this.image[0].imgUrl)
			}).catch((e) => {})
		},
		methods: {
			btn(){
				uni.navigateTo({
					url:'../../zonghe/hehuo/hehuo'
				})
			},
			router(id) {
				let url = ''
				switch (id) {
					case 0:
						console.log('富同商城');
						url = '/Shop/index/index'
						break;
					case 1:
						url = '/Estate/index/index'
						console.log('不动产');
						break;
					case 2:
						console.log('家政服务');
						url = '/Home/index/index'
						break;
					case 3:
						console.log('文旅');
						url = '/wenlv/index/index'
						break;
					case 4:
						console.log('综合服务');
						url = '/zonghe/index/index'
						break;
					case 5:
						console.log('公司简介');
						url = '/company/company'
						break;
					default:
						break;
				}
				this.$u.route({
					url: url
				})
			},
		}
	}
</script>

<style lang="scss">
	.head {
		width: 750rpx;
		height: 1200rpx;

	}

	.main {
		position: relative;
		width: 750rpx;
		height: 600rpx;

		.title {
			width: 70%;
			position: absolute;
			left: 0;
			right: 0;
			top: 180rpx;
			margin: auto;
			font-size: 34rpx;
			font-weight: 600;
			z-index: 99;

			.txt {
				color: rgba(51, 51, 51, 100);
				text-shadow: 0 0 10px #9d9d9d;
				margin-bottom: 40rpx;
			}

			.txt1 {
				color: rgba(51, 51, 51, 100);
				text-shadow: 0 0 10px #9d9d9d;
			}

			.banner {
				margin-top: 20rpx;
				margin-bottom: 40rpx;
				height: 460rpx;

				.swiper-item {
					width: 100%;
					height: 100%;

					image {}
				}
			}

			.banner1 {
				margin-top: 20rpx;
				margin-bottom: 60rpx;
				height: 390rpx;

				.swiper-item {
					width: 100%;
					height: 100%;

					image {}
				}
			}

			.lists {
				display: flex;
				justify-content: space-around;
				flex-wrap: wrap;
				margin-bottom: 40rpx;

				.list {
					width: 30%;
					margin: auto;
					text-align: center;

					image {
						width: 100rpx;
						height: 100rpx;
					}

					.text {
						color: rgba(16, 16, 16, 100);
						font-size: 28rpx;
						font-weight: normal;
					}
				}
			}

			.logo {
				margin: auto;
				text-align: center;

				image {
					width: 100%;
					height: 300rpx;
				}
			}

			.row {

				.image {
					width: 100%;
					height: 200rpx;
				}

				.list {
					$height: 50rpx;
					margin-top: 20rpx;

					.li {
						display: flex;
						justify-content: space-between;
						height: $height;

						.text {
							font-size: 28rpx;
							font-weight: normal;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							line-height: $height;
						}

						.icon {
							margin-left: 5rpx;
							line-height: $height;
							width: 20rpx;
							height: 25rpx;
						}
					}
				}
			}
		}

	}

	.main1 {
		width: 750rpx;
		height: 1800rpx;

	}

	.bottom {
		width: 750rpx;
		height: 600rpx;

	}

	.img {
		width: 100%;
		height: 100%;
	}
</style>
